<template>
    <div id="app">
        <StarryBackground />
        <div style="height: 80px;"></div>
        <div class="container">
            <div class="intro">
                <div class="logo">
                    <img src="../assets/测盟汇图标.png" alt="">
                </div>
                <div class="textLogo">
                    <el-text class="mx-1"
                        style="font-size:50px;margin-left:110px;color: white;font-weight: 700;">测盟汇</el-text>
                </div>
                <div style="width: 300px;margin: 20px 0 0 40px;">
                    <el-text class="mx-1"
                        style="font-size:small;color: white;font-weight: 700;font-style: italic">测盟汇旨在通过开发一个在线会议管理平台，解决会议组织过程中遇到的各种痛点问题，
                        提高会议组织效率，增强会员单位成员的参与度和满意度。<br />本系统旨在优化会议注册流程、整合会议通知和新闻发布、
                        提供在线回放和直播功能，使参会者可以更便捷地获取会议信息和学习优秀会议报告，
                        从而促进会员单位之间的信息交流和知识共享</el-text>
                </div>

            </div>
            <div class="signUp">
                <h1>注册</h1>
                <el-form class="form" :model="userinfo" :rules="rules" ref="formRef" label-width="140px">
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="userinfo.name" style="width: 200px"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人" prop="contacts">
                        <el-input v-model="userinfo.contacts" style="width: 200px"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="pwd">
                        <el-input v-model="userinfo.pwd" style="width: 200px" type="password"
                            placeholder="Please input password" show-password />
                    </el-form-item>
                    <el-form-item label="再次输入密码" prop="confirmPassword">
                        <el-input v-model="userinfo.confirmPassword" style="width: 200px" type="password"
                            placeholder="请再次输入密码" show-password />
                    </el-form-item>
                    <el-form-item label="请输入验证码" prop="verificationCode">
                        <el-input v-model="userinfo.verificationCode" style="width: 130px" type="password"
                            placeholder="请输入验证码" show-password />
                        <img :src="validImage.verifyCodeImgUrl" alt="验证码显示错误" style="height: 30px;width: 50px;margin-left:20px" @click="changeValid()">
                    </el-form-item>
                    <el-form-item class="btnGroup">
                        <el-button type="primary" @click="submitForm()">提交</el-button>
                        <el-button @click="resetForm()">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeMount } from 'vue';
import { ElMessage, FormInstance } from 'element-plus';
import { useRouter } from 'vue-router';
import request from '../until/request.ts';
import StarryBackground from './StarryBackground.vue'; // 导入星空背景组件
import { log } from 'console';
import axios from 'axios';
const formRef = ref<FormInstance>()

let router = useRouter()

let validImage = reactive({
    verifyCode: '',
    verifyCodeImgUrl: ''
});

let userinfo = reactive({
    name: '',
    pwd: '',
    contacts: '',
    confirmPassword: '',
    verificationCode: ''
});

const rules = {
    name: [
        { required: true, message: '请输入名称', trigger: 'blur' }
    ],
    contacts: [
        { required: true, message: '请输入联系人', trigger: 'blur' }
    ],
    pwd: [
        { required: true, message: '请输入密码', trigger: 'blur' }
    ],
    confirmPassword: [
        { required: true, message: '请再次输入密码', trigger: 'blur' },
        {
            validator: (rule: any, value: any, callback: any) => {
                if (value !== userinfo.pwd) {
                    callback(new Error('两次输入密码不一致'));
                } else {
                    callback();
                }
            }, trigger: 'blur'
        }
    ],
    verificationCode: [
        { required: true, message: '请输入验证码', trigger: 'blur' }
    ]
};

onBeforeMount(async () => {
    const response = await axios.post('https://www.mxnzp.com/api/verifycode/code?len=6&type=0&app_id=nmkainjrorqwvwta&app_secret=eorEMPKQ3lJooVAhuU8rOoWcky6ubeDz')
    validImage.verifyCode = response.data.data.verifyCode;
    validImage.verifyCodeImgUrl = response.data.data.verifyCodeImgUrl;
});

const submitForm = () => {
    if (formRef.value) {
        formRef.value.validate(async (valid: any) => {
            if (valid && (userinfo.verificationCode == validImage.verifyCode)) {
                // ElMessage({
                //     message: '提交成功!',
                //     type: 'success',
                // });

                try {
                    let fd = new FormData();
                    fd.append('name', userinfo.name);
                    fd.append('pwd', userinfo.pwd);
                    fd.append('role', "1");
                    fd.append('contacts', userinfo.contacts);
                    const response = await request.post('/user/register', fd)

                    if (response.data.isOk) {
                        ElMessage({
                            message: response.data.msg,
                            type: 'success',
                        });
                        router.push('/');
                    }
                    else {
                        ElMessage({
                            message: response.data.msg,
                            type: 'success',
                        });
                    }


                } catch (error) {
                    console.error('Login failed:', error)
                    // 可以在这里添加错误处理，例如显示错误消息给用户
                }

            } else {
                ElMessage({
                    message: '请检查填写的信息!',
                    type: 'error',
                });
                return false;
            }
        });
    }
};

// Reset form
const resetForm = () => {
    if (formRef.value) {
        formRef.value.resetFields();
    }
};

const changeValid = async ()=> {
    const response = await axios.post('https://www.mxnzp.com/api/verifycode/code?len=6&type=0&app_id=nmkainjrorqwvwta&app_secret=eorEMPKQ3lJooVAhuU8rOoWcky6ubeDz')
    validImage.verifyCode = response.data.data.verifyCode;
    validImage.verifyCodeImgUrl = response.data.data.verifyCodeImgUrl;
}
</script>

<style scoped>
.container {
    display: flex;
    justify-content: center;
    height: 600px;
    width: 100%;
    border-color: rgb(218, 218, 218);
}

.intro {
    width: 425px;
    height: 500px;
    border: 1px rgb(192, 190, 190) solid;
    box-shadow: 5px -20px 20px -4px #a7a4a4;
    background-color: rgb(71, 86, 106);
}

.intro img {
    margin: 40px 0 0 10px;
    width: 150px;
    height: 150px;
}

.logo {
    background-color: rgb(71, 86, 106);
    margin: 50px 110px;
}

.textLogo {
    margin-top: 85px
}

.signUp {
    width: 425px;
    height: 470px;
    padding-top: 30px;
    text-align: center;
    border: 1px rgb(192, 190, 190) solid;
    box-shadow: 30px -20px 20px -4px #a7a4a4;

}

.form {
    padding-top: 15px;
}

.btnGroup {
    padding: 30px 0 0 25px;
    display: flex;
    justify-content: center;
}

.supportProm {
    display: flex;
    justify-content: center;
    margin-top: 70px
}

.cooperations {
    display: flex;
    justify-content: center;
}

.cooperations img {
    width: 40px;
    height: 40px;
    margin: 8px 10px;
}
</style>
